import React, { useRef, useImperativeHandle, forwardRef } from "react"
import { View } from "@tarojs/components"
import { SafeArea } from "@taroify/core"
import clsx from "clsx"
import Icon from "@/components/GpFontIcon"
import { Like, LikeOutlined, StarOutlined, Star } from "@taroify/icons"
import styles from "./index.module.scss"
import GpShareButton from "@/components/GpShareButton"
import GpCommentSender from "../GpCommentSender"

export default forwardRef(function GpOpinion(
  {
    fillPlaceholder = true,
    onConfirm,
    onAction,
    className,
    likeCount,
    collectCount,
    placeholder = "发表你的看法",
    senderPlaceholder = "发条评论分享一下你的想法吧!",
    topCommentAction,
    isCollect,
    isLike
  }: IGpOpinionProps,
  ref
) {
  const commentSenderRef = useRef<ICommentSendernRef>(null)
  useImperativeHandle<unknown, IOpinionRef>(
    ref,
    () => {
      return {
        triggerComment: function _triggerComment(
          parentId?: number,
          isTopComment?: boolean,
          ownParentId?: number
        ) {
          if (commentSenderRef.current) {
            commentSenderRef.current.triggerComment(parentId, isTopComment, ownParentId)
          }
        }
      }
    },
    []
  )
  function handleAction(actionType: "like" | "collect") {
    onAction && onAction(actionType)
  }
  function handleClickTopComment() {
    if (commentSenderRef.current) {
      commentSenderRef.current.handleClickTopComment()
    }
  }
  /** 渲染底部评论操作栏 */
  function renderBottomActions() {
    return (
      <View className={clsx(styles.opinionWrap, className)}>
        <View className={styles.opinion}>
          <View className={styles.inputWrap}>
            <Icon icon="icon-huifu" color="#999999" size={32} />
            <View className={styles.input} onClick={handleClickTopComment}>
              {placeholder}
            </View>
          </View>
          <View className={styles.action} onClick={() => handleAction("like")}>
            {isLike ? (
              <Icon icon="icon-dianzan-yidian" color="#FA3F29" size={48} />
            ) : (
              <Icon icon="icon-dianzan" color="#999999" size={48} />
            )}
            {likeCount}
          </View>
          <View className={styles.action} onClick={() => handleAction("collect")}>
            {isCollect ? (
              <Icon icon="icon-shoucang-yixuanzhong" color="#FF8615" size={48} />
            ) : (
              <Icon icon="icon-shoucang" color="#999999" size={48} />
            )}
            {collectCount}
          </View>
          <GpShareButton
            shareText="分享"
            icon="icon-fenxiang"
            iconSize={48}
            className={clsx(styles.action, styles.actionAction)}
            iconClassName={styles.actionIcon}
          />
        </View>
        <SafeArea
          position="bottom"
          style={{
            backgroundColor: "inherit"
          }}
        />
      </View>
    )
  }
  /* placeholder */
  function renderBottomActionsPlaceholder() {
    if (!fillPlaceholder) return null
    return (
      <View className="box-border">
        <View className={styles.contentPlaceholder}></View>
        <SafeArea
          position="bottom"
          style={{
            backgroundColor: "inherit"
          }}
        />
      </View>
    )
  }
  /** 渲染评论输入发送 */
  function renderCommentSender() {
    return (
      <GpCommentSender
        ref={commentSenderRef as any}
        placeholder={senderPlaceholder}
        onConfirm={onConfirm}
        topCommentAction={topCommentAction}
      />
    )
  }
  return (
    <React.Fragment>
      {renderBottomActions()}
      {renderBottomActionsPlaceholder()}
      {renderCommentSender()}
    </React.Fragment>
  )
})
